<template>
  <div>
    <!-- 下滑后展示的选择Team的部分 -->
    <!-- Teams -->
  </div>
  <div id="team-page" class="animation">
    <!-- 可下滑的卡片 -->
    <div id="touch-button">
      <div id="touch-button-img"></div>  
    </div>
    <div >
      <!-- groups选择 -->
      <!-- groups -->
    </div>
    <div class="dy-list">
      <!-- 动态列表 -->
      <!-- dy list -->
    </div>
  </div>
</template>

<script lang="ts">

import { defineComponent, ref, SetupContext, toRefs } from "vue";
import useTranslate from "../../hooks/useTranslate";

export default defineComponent({
  props: {
    
  },
  setup(props, ctx: SetupContext) {

    const translate = useTranslate('touch-button', 'team-page')

    return {
      ...translate.state
    }
  },
});

</script>

<style>

#team-page {
  top: 10vh;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #cdcdcd;
  border-radius: 50px;
}

#touch-button {
  text-align: center;
  padding: 10px;
}

#touch-button div{
  display: inline-block;
  height: 11px;
  width: 9vh;
  border-radius: 6px;
  box-shadow: black 1px 1px 1px 1px;
  transition: 0.5s height, .7s width;
}

.animation {
  transition: transform .5s cubic-bezier(0, 0.25, 0.2,0.4);
}
@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}

.dy-list:hover  {
  animation: 1s 1s rainbow linear 3 forwards normal;
}

.touch-img {

  margin-top: 12px;
  border-radius: 5px;
  border: 1px solid #4a4a4a;
  box-shadow: inset #969696 0px 0px 1px 2px;
  width: 45px;
  height: 11px;
  display: inline-block;
}
</style>